import React, { Component } from 'react';
//加载中组件 卡片视图 评分 antd
import { Spin, Card, Rate, Pagination } from 'antd';
const { Meta } = Card;
class MovieList extends Component {
    constructor(props){
        super();
        this.state={
            type: props.match.params.type, //当前锚点类型
            nowPage: props.match.params.page, //当前页码值
            pageSize: 10, //每页显示10条数据 可控制 
            total: 0, //获取总数据条数
            isLoading: true,  //是否加载数据  默认加载中
            movieList: [
                
            ]  //获取到的数据电影列表
        }
    }
    render() {
        console.log(this.props)
        return (
            <div>
               {
               this.state.isLoading ? <div style={{textAlign: 'center',marginTop: '10px'}}><Spin size="large" /></div>
                : <div>
                    <div className="mList">
                  {
                      this.state.movieList.map(item=><Card 
                        onClick={()=>this.goDetail(item.id)}
                        key={item.id} 
                        className="mItem"
                        hoverable
                        style={{ width: '220px' }}
                        cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                      >
                      <Meta title="我和僵尸有个约会"/>
                     <Rate allowHalf defaultValue={2.5} />
                      </Card>)
                  }
               </div>
               {/* defaultCurrent  默认页码 
                   total   后台总数据条数
               */}
                <Pagination defaultCurrent={parseInt(this.state.nowPage)}
                defaultPageSize={this.state.pageSize}
                total={parseInt(this.state.total)}
                onChange={(page,pagesize)=>this.pageChange(page)}
                style={{margin: "10px 5px"}}/> 
                </div>
               }
            </div>
        )
    }
    //分页页码改变的函数调用
    pageChange=(page)=>{
        console.log(page)
        //编程式导航跳转 第几页 
        this.props.history.push('/movie/'+this.state.type+'/'+page);
    }

    //图片跳转详情页
    goDetail=(id)=>{
       console.log(id)
       //编程式跳转详情页
       this.props.history.push('/movie/detail/'+id)
    }

    //在url改变是同步render渲染
    componentWillReceiveProps(nextProps){
        //获取内存中最新的props数据同步state
        this.setState({
            type: nextProps.match.params.type,
            nowPage: nextProps.match.params.page,
            isLoading: true
        },function(){
            setTimeout(()=>{
                this.getMovieList();
            },2000)  //点击切换组件 state改变后 重新获取数据
        })
    }
    //组件将要挂载 内存中都是最新的数据 发请求
    componentWillMount(){
       setTimeout(()=>{
        this.getMovieList();
       },2000)
    }
    //获取数据函数
    getMovieList = async()=>{
        //start 从第几条开始取数据 
        //count 获取多少条数据
        //pageSize 每页条数 10 条
        // 1页  0开始   一页10条  start=（当前页-1）* pageSize
        // 2页  10开始
        // 3页  20开始
        // 4页  30开始 
        //获取偏移量
        // const start = (this.state.nowPage-1)*this.state.pageSize;

        // const res = await this.$http(this.baseURL+'/v2/movie'+this.state.type+'?start='+start+'&count='+this.state.pageSize );
        // const data = await res.json();
    //    console.log(data)

    const data = {
        "count": 2,
        "start": 100,
        "total": 101,
        "subjects":[
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 1,
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 2
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 3
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 4
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 5
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 6
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 7
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 8
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 9
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 10
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 11
            },
            {
                "title":'黑色假面',
                "year": 2020,
                "genres":[
                    "剧情",
                    "悬疑"
                ],
                "rating":{
                    "max": 10,
                    "average": 0,
                    "starts": 10,
                    "min": 0
                },
                "id": 12
            },
        ]
    }
       //获取到数据 添加到state
       this.setState({
           movieList: data.subjects,
           isLoading: false,
           total: data.total
       })
    }
}
export default MovieList;